<template>
	<view class="content">
		{{ }}
		<view class="mix-tree-list">
			<block v-for="(item, index) in treeList" :key="index">
				<view class="mix-tree-item" :style="[{
							paddingLeft: item.rank*15 + 'px',
							zIndex: item.rank*-1 +50
						}]"
				 :class="{
							border: treeParams.border === true,
							show: item.show,
							last: item.lastRank,
							showchild: item.showChild
						}"
				 @click.stop="treeItemTap(item, index)">
					<image class="mix-tree-icon" :src="item.lastRank ? treeParams.lastIcon : item.showChild ? treeParams.currentIcon : treeParams.defaultIcon"></image>
					{{item.name}}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	let _self;
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			rank: {
				type: Number
			},
			handelIndex: {
				type: Number
			}
		},
		data() {
			return {
				treeList: [],
				treeParams: {
					defaultIcon: '/static/mix-tree/defaultIcon.png',
					currentIcon: '/static/mix-tree/currentIcon.png',
					lastIcon: '',
					border: false
				}
			}
		},
		watch: {
			list(val) {
				// handler(val) {
				_self = this;
				console.log(val.length)
				this.treeParams = Object.assign(this.treeParams, this.params);
				// console.log(this.treeParams, this.params);
				// uni.$once('listChange',(list)=>{
				// 	console.log('onc执行');
				// 	this.renderTreeList(list);
				// })
				this.renderTreeList(val, this.rank);
				// uni.
				// },

				// deep:true
			},

		},
		// computed:{
		// 	reSet(){
		// 		this.renderTreeList(this.list)
		// 	}
		// },
		methods: {
			//扁平化树结构
			renderTreeList(list = [], rank = 0, parentId = []) {
				console.log(JSON.stringify(this.treeList));
				console.log('rank==' + rank);
				console.log('this.handelIndex=' + this.handelIndex);

				this.list.forEach(item => {
					if (rank == 0) {
						this.treeList.push({
							id: item.id,
							name: item.name,
							index: item.index,
							children: [],
							parentId, // 父级id数组
							rank, // 层级
							showChild: false, //子级是否显示
							show: rank === 0 // 自身是否显示
						})
					} else if (rank == 1) {
						console.log(1111);
						this.treeList[this.handelIndex].children.push({
							id: item.id,
							name: item.name,
							index: item.index,
							children: [],
							parentId: this.treeList[this.handelIndex].id, // 父级id数组
							rank, // 层级
							showChild: false, //子级是否显示
							show: rank === 0 // 自身是否显示
						})

					}

					// this.treeList.push({
					// 	id: item.id,
					// 	name: item.name,
					// 	index: item.index,
					// 	parentId, // 父级id数组
					// 	rank, // 层级
					// 	showChild: false, //子级是否显示
					// 	show: rank === 0 // 自身是否显示
					// })
					// if (Array.isArray(item.children) && item.children.length > 0) {
					// 	let parents = [...parentId];
					// 	parents.push(item.id);
					// 	this.renderTreeList(item.children, rank + 1, parents);
					// } else {
					// 	this.treeList[this.treeList.length - 1].lastRank = true;
					// }
				})
				console.log(JSON.stringify(this.treeList));
				console.log(this.treeList[this.handelIndex].showChild)
				if (rank == 1) {
					this.treeList[this.handelIndex].showChild = this.treeList[this.handelIndex].showChild;
				}
				console.log(999);
			},
			// 点击
			treeItemTap(item) {
				let list = this.treeList;
				let id = item.id;
				if (item.lastRank === true && item.rank != 0) {
					//点击最后一级时触发事件
					this.$emit('treeItemClick', item);
					// console.log(1);
					return;
				} else {
					// console.log(2);
					this.$emit('treeParentClick', item);
				}
				// uni.$once('setShowChild', res => {
				// 	console.log(res);
				// 	// _self.renderTreeList(_self.list)

				// 	_self.reSetList(res)

				// 	// item.showChild = !item.showChild;
				// 	this.treeList[res].showChild = !this.treeList[res].showChild;
				// 	console.log(this.treeList);
				// })

				item.showChild = !item.showChild;

				list.forEach(childItem => {
					if (item.showChild === false) {
						//隐藏所有子级
						if (!childItem.parentId.includes(id)) {
							return;
						}
						if (childItem.lastRank !== true) {
							childItem.showChild = false;
						}
						childItem.show = false;
					} else {
						if (childItem.parentId[childItem.parentId.length - 1] === id) {
							childItem.show = true;
						}
					}
				})
			}
			// reSetList(i){
			// 	let arr = [];
			// 	this.list[i].children.forEach(item=>{
			// 			this.treeList[i].children.push({
			// 				id: item.id,
			// 				name: item.name,
			// 				index: item.index,
			// 				parentId,  // 父级id数组
			// 				rank,  // 层级
			// 				showChild: false,  //子级是否显示
			// 				show: rank === 0  // 自身是否显示
			// 			})
			// 	})
			// }
		}
	}
</script>

<style>
	.mix-tree-list {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
	}

	.mix-tree-item {
		display: flex;
		align-items: center;
		font-size: 30upx;
		color: #333;
		height: 0;
		opacity: 0;
		transition: .2s;
		position: relative;
	}

	.mix-tree-item.border {
		border-bottom: 1px solid #eee;
	}

	.mix-tree-item.show {
		height: 80upx;
		opacity: 1;
	}

	.mix-tree-icon {
		width: 26upx;
		height: 26upx;
		margin-right: 8upx;
		opacity: .9;
	}

	.mix-tree-item.showchild:before {
		transform: rotate(90deg);
	}

	.mix-tree-item.last:before {
		opacity: 0;
	}
</style>
